<template>
	<div class="meetiformbox" >
		<el-form label-width="80px" size="mini" label-position="left" v-if="Reserve.ReserverType === 1">
				<el-form-item label="使用人:">
					{{info.ExecutorUserName}}
				</el-form-item>
				<el-form-item label="会议主题:">
					{{info.Theme}}
				</el-form-item>
				<el-form-item label="会议时间:">
					{{meetingTime(info.BeginTimeStamp,info.EndTimeStamp)}}
				</el-form-item>
				<el-form-item label="会议议程:" v-if="info.Agenda">
					{{info.Agenda}}
				</el-form-item>
				<el-form-item label="管理员:" v-if="info.AdminName">
					{{info.AdminName}}
				</el-form-item>
				<el-form-item label="预定状态:">
					{{getReserverStatus(info.ReserverStatus)}}
				</el-form-item>
			<div v-if="info&&(info.BookerUserID==user.UserID||info.AdminUserID==user.UserID)" style="text-align: center">
				<template v-if="info.BookerUserID==user.UserID">
					<el-button type="primary" v-if="showcanle" @click="doCanlce('canlce')">取消会议</el-button>
					<el-button type="primary" v-else-if="showComplete" @click="doCanlce('complete')">提前结束</el-button>
				</template>
				<template v-if="info.AdminUserID==user.UserID">
					<el-button type="primary" v-if="showcanle" @click="doCanlce('canlce')">管理员取消</el-button>
					<el-button type="primary" v-else-if="showComplete" @click="doCanlce('complete')">管理员结束</el-button>
				</template>
			</div>
		</el-form>
		<swiper :options="swiperOption" v-else style="min-height: 180px;max-height: 200px">
			<swiper-slide v-for="(item,index) in  infoList" :key="index">
				<el-form label-width="80px" size="mini" label-position="left" >
					<el-form-item label="使用人:">
						{{item.ExecutorUserName}}
					</el-form-item>
					<el-form-item label="会议主题:">
						{{item.Theme}}
					</el-form-item>
					<el-form-item label="会议时间:">
						{{meetingTime(item.BeginTimeStamp,item.EndTimeStamp)}}
					</el-form-item>
					<el-form-item label="会议议程:" v-if="item.Agenda">
						{{item.Agenda}}
					</el-form-item>
					<el-form-item label="管理员:" v-if="item.AdminName">
						{{item.AdminName}}
					</el-form-item>
					<el-form-item label="预定状态:">
						{{getReserverStatus(item.ReserverStatus)}}
					</el-form-item>
				</el-form>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>
<script type="es6">
import API from '@/API';
import myCommon from '../../../mixin/myCommon';
import {mapState} from 'vuex';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
  mixins: [myCommon],
  data () {
    return {
      info: {},
      swiperOption: {
        direction: 'vertical',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
	    infoList: []
    };
  },
  props: {
    Reserve: {
      type: Object,
      default: () => { return {}; }
    },
    index: {
      type: Object,
      default: () => { return {}; }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
    showcanle () {
      if (Date.now() < this.info.BeginTimeStamp) {
        return true;
      }
      return false;
    },
    showComplete () {
      if (Date.now() < this.info.EndTimeStamp && Date.now() > this.info.BeginTimeStamp) {
        return true;
      }
      return false;
    }
  },
  methods: {
    init () {
      if (this.Reserve.ReserverType === 1) {
        this.loading = true;
        API.getreserver(this.Reserve.ReserveID).then((res) => {
          let json = res.data;
          this.loading = false;
          if (json.status === '200') {
            this.info = json.data;
            this.$nextTick(() => {
              this.$parent.updatedestineModelPopper();
            });
          }
        }).catch(() => {
          this.loading = false;
        });
      } else {
        this.loading = true;
        API.getreserverList({
          RoomID: this.Reserve.RoomID,
          EndTimeStamp: this.Reserve.EndTimeStamp,
          BeginTimeStamp: this.Reserve.BeginTimeStamp
        }).then((res) => {
          let json = res.data;
          this.loading = false;
          if (json.status === '200') {
            this.infoList = json.data;
            this.$nextTick(() => {
              this.$parent.updatedestineModelPopper();
            });
          }
        }).catch(() => {
          this.loading = false;
        });
      }
    },
    doCanlce (type) {
      this.loading = true;
      this.$nextTick(() => {
        this.$emit('Canlcereserver', {
          ReserveID: this.Reserve.ReserveID,
          type: type,
          callback: () => {
            this.loading = false;
          },
          index: this.index
        });
      });
    }
  },
  mounted () {
    this.init();
  }
};
</script>
<style lang="less">
	.meetiformbox {
		width: 100%;
		.el-form-item__content {
			word-break: break-word;
			font-size: 12px;
		}
		.el-form-item__label {
			font-size: 12px;
		}
		.el-form-item{
			margin-bottom: 4px;
		}
	}
</style>
